// 进度条
import { Steps, Popover,Select,Input,Radio,Tabs,Checkbox, Row, Col} from 'antd';
// import { useState} from 'react'
import './shipment.css'
// 发货按钮
// import { Button, Radio } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';
// 详情表格
import { Table } from 'antd';
// 弹框
import React, { useState } from 'react';
import { Modal, Button } from 'antd';
import {useHistory} from 'react-router-dom';
// 弹框中的下拉框
const { Option } = Select;
// 弹框中的选框
// import { Checkbox, Row, Col } from 'antd';

const { Step } = Steps;
function Shipment() {
    // 取 sessionStorage的user
    const user=JSON.parse(sessionStorage.getItem('user'))

    // 进度条
    // const customDot = (dot, { status, index }) => (
    //     <Popover
    //       content={
    //         <span>
    //           step {index} status: {status}
    //         </span>
    //       }
    //     >
    //       {dot}
    //     </Popover>
    //   );
    const [current, curentn] = useState(0)
    const onChange = current => {
        curentn(current)
        // console.log('onChange:', current);

        // this.setState({ current });
    };
    const jingtu = [
        {

        }
    ]
    // 返回
    // 路由跳转
    const history=useHistory(); 
    const fanhui=()=>{
    history.push({pathname:'/admin/order' })
}

    // const { current } = this.state;
    // 详情的表格

    const columns = [
        {
            title: '商品信息',
            dataIndex: 'ggg',
            key: 'ggg',
            render: ggg => {
                return (
                    <div className="W_shnagping">
                        <img className="W_img" src={ggg.img} alt="" />
                        <span className="W_spxx">{ggg.fff}</span>
                    </div>
                )
            },
        },
        {
            title: '规格',
            dataIndex: 'gunge',
            key: 'gunge',
            responsive: ['md'],
            render: gunge => {
                return (
                    <span>{gunge}</span>
                )
            },
        },
        {
            title: '单价',
            dataIndex: 'danjia',
            key: 'danjia',
            responsive: ['lg'],
            render: danjia => {
                return (
                    <span>{danjia}</span>
                )
            },
        },
        {
            title: '数量',
            dataIndex: 'jianshu',
            key: 'jianshu',
            responsive: ['lg'],
            render: jianshu => {
                return (
                    <span>{jianshu}件</span>
                )
            },
        },
        {
            title: '状态',
            dataIndex: 'zhuangtai',
            key: 'zhuangtai',
            responsive: ['lg'],
            render: zhuangtai => {
                return (
                    <span>{zhuangtai}件</span>
                )
            },
        },
        {
            title: '结算',
            dataIndex: 'jiesuanzhuantai',
            key: 'jiesuanzhuantai',
            responsive: ['lg'],
            render: jiesuanzhuantai => {
                return (
                    <span>{jiesuanzhuantai}件</span>
                )
            },
        },
        {
            title: '实付款',
            dataIndex: 'may',
            key: 'may',
            responsive: ['lg'],
            render: may => {
                return (
                    <span className="W_may">￥{may}</span>
                )
            },
        },
    ];

    const data = [
        {
            key: '3',
            ggg: {
                
                img: 'https://img0.baidu.com/it/u=3637253816,3603290807&fm=26&fmt=auto&gp=0.jpg',
                fff:'265468414649854865+95465+56549465+65+955+65+55+565+65+',
            },
            danjia: 2,
            jianshu: 32,
            zhuangtai: '待付款',
            gunge: '蓝色',
            jiesuanzhuantai: '未结算',
            may: '64:00',
        },
        {
            key: '4',
            ggg: {
                
                img: 'https://img0.baidu.com/it/u=3637253816,3603290807&fm=26&fmt=auto&gp=0.jpg',
                fff:'265468414649854865+95465+56549465+65+955+65+55+565+65+',
            },
            danjia: 2,
            jianshu: 32,
            zhuangtai: '待付款',
            gunge: '蓝色',
            jiesuanzhuantai: '未结算',
            may: '64:00',
        },
        {
            key: '5',
            ggg: {
                
                img: 'https://img0.baidu.com/it/u=3637253816,3603290807&fm=26&fmt=auto&gp=0.jpg',
                fff:'265468414649854865+95465+56549465+65+955+65+55+565+65+',
            },
            danjia: 2,
            jianshu: 32,
            zhuangtai: '待付款',
            gunge: '蓝色',
            jiesuanzhuantai: '未结算',
            may: '64:00',
        },
        {
            key: '6',
            ggg: {
                
                img: 'https://img0.baidu.com/it/u=3637253816,3603290807&fm=26&fmt=auto&gp=0.jpg',
                fff:'265468414649854865+95465+56549465+65+955+65+55+565+65+',
            },
            danjia: 2,
            jianshu: 32,
            zhuangtai: '待付款',
            gunge: '蓝色',
            jiesuanzhuantai: '未结算',
            may: '64:00',
        },
       
    ];
    const columns1 = [
        {
            title: '包裹',
            dataIndex: 'ggg',
            key: 'ggg',
            render: ggg => {
                return (
                    <div className="W_shnagping">
                        <img className="W_img" src={ggg.img} alt="" />
                        <img className="W_img" src={ggg.img2} alt="" />
                        <span className="W_spxx">{ggg.fff}</span>
                    </div>
                )
            },
        },
        {
            title: '件数',
            dataIndex: 'jianshu',
            key: 'jianshu',
            responsive: ['md'],
            render: jianshu => {
                return (
                    <span>{jianshu}</span>
                )
            },
        },
        {
            title: '单价',
            dataIndex: 'danjia',
            key: 'danjia',
            responsive: ['lg'],
            render: danjia => {
                return (
                    <span>{danjia}件</span>
                )
            },
        },
        {
            title: '时间',
            dataIndex: 'f_mine',
            key: 'f_mine',
            responsive: ['lg'],
            render: f_mine => {
                return (
                    <span>{f_mine}</span>
                )
            },
        },
        {
            title: '快递公司',
            dataIndex: 'kauidigongsi',
            key: 'kauidigongsi',
            responsive: ['lg'],
            render: kauidigongsi => {
                return (
                    <span>{kauidigongsi}</span>
                )
            },
        },
        {
            title: '快递单号',
            dataIndex: 'danhao',
            key: 'danhao',
            responsive: ['lg'],
            render: danhao => {
                return (
                    <span>{danhao}</span>
                )
            },
        },
        {
            title: '操作',
            dataIndex: 'may',
            key: 'may',
            responsive: ['lg'],
            render: may => {
                const cmdde=()=>{
                    if(orderid == "3"){
                       return(
                        <Button 
                        className="w_anniu_h" type="primary" onClick={showModal}>
                        修改物流
                    </Button>
                       )
                    }else{
                        return(<span></span>)
                    }
                }
                return (
                    <div className="w_an_niu_h">
                            <Button 
                            className="w_anniu_h" type="primary" onClick={showModal2}>
                             查看物流
                        </Button>

                        {cmdde()}
                    </div>
                )
            },
        },
    ];

    const data1 = [
        {
            key: '3',
            ggg: {
                img: 'https://img0.baidu.com/it/u=3637253816,3603290807&fm=26&fmt=auto&gp=0.jpg',
                img2: 'https://img0.baidu.com/it/u=3637253816,3603290807&fm=26&fmt=auto&gp=0.jpg',
            },
            danjia: 2,
            jianshu: 32,
            f_mine: '2021-08-10 15：32：33',
            gunge: '蓝色',
            kauidigongsi: '中通',
            danhao: 'Z874444',
        },
        {
            key: '4',
            ggg: {
                img: 'https://img0.baidu.com/it/u=3637253816,3603290807&fm=26&fmt=auto&gp=0.jpg',
                img2: 'https://img0.baidu.com/it/u=3637253816,3603290807&fm=26&fmt=auto&gp=0.jpg',
            },
            danjia: 2,
            jianshu: 32,
            f_mine: '2021-08-10 15：32：33',
            gunge: '蓝色',
            kauidigongsi: '中通',
            danhao: 'Z874444',
        },
        {
            key: '5',
            ggg: {
                img: 'https://img0.baidu.com/it/u=3637253816,3603290807&fm=26&fmt=auto&gp=0.jpg',
                img2: 'https://img0.baidu.com/it/u=3637253816,3603290807&fm=26&fmt=auto&gp=0.jpg',
            },
            danjia: 2,
            jianshu: 32,
            f_mine: '2021-08-10 15：32：33',
            gunge: '蓝色',
            kauidigongsi: '中通',
            danhao: 'Z874444',
        },
       
    ];

    // 弹框修改物流
    const [isModalVisible, setIsModalVisible] = useState(false);
    const showModal = () => {
        setIsModalVisible(true);
        // history.push({pathname: '/admin/nquire'})
    };

    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    // 弹框查看物流
    const [isModalVisible2, setIsModalVisible2] = useState(false);
    const showModal2 = () => {
        setIsModalVisible2(true);
    };

    const handleOk2 = () => {
        setIsModalVisible2(false);
    };

    const handleCancel2 = () => {
        setIsModalVisible2(false);
    };
    // 单选框
    const [value, setValue] = React.useState(1);
    const danonChange = e => {
        console.log('radio checked', e.target.value);
        setValue(e.target.value);
      };
    //   弹框中的tib选项
    const { TabPane } = Tabs;

    function callback(key) {
      console.log(key);
    }
    // 多选框
     // 未发货
     function weionChange(checkedValues) {
        console.log('checked = ', checkedValues);
      }
    // 已发货
    function yionChange(checkedValues) {
        console.log('checked = ', checkedValues);
      }
    //   回显id
    const orderid=sessionStorage.getItem('orderid')
    return (
        <div className="big-card">
            <div className="card-header">
                <h2>订单管理</h2>
            </div>
            <div className="W_box_F_H">
                {/* 进度条 */}
                <div className="W_box2_H">
                    <div className="W_jin">
                        <Steps current={current} onChange={onChange} labelPlacement='vertical' percent='1' >
                            <Step className="W_time" title="买家下单" description="2021-7-8 17:50:23" />
                            <Step title="买家付款" description="2021-7-8 17:50:23" />
                            <Step title="商家发货" description="2021-7-8 17:50:23" />
                            <Step title="订单完成" description="2021-7-8 17:50:23" />
                        </Steps>
                        {/* <Steps current={2} progressDot={customDot.bind(this,1,2,3)}>
                            <Step title="Finished" description="You can hover on the dot." />
                            <Step title="In Progress" description="You can hover on the dot." />
                            <Step title="Waiting" description="You can hover on the dot." />
                            <Step title="Waiting" description="You can hover on the dot." />
                        </Steps> */}
                    </div>
                    <div className="W_xq">
                        <div className="W_xxi">
                            <div className="d-f x-s-b W_zhtai">
                                <div className="d-f">
                                    <p className="W_xiao">订单编号：</p>
                                    <p>XY20190621131410005321</p>
                                    <p>复制</p>
                                </div>
                                <div className="d-f ">
                                    <p>订单状态：</p>
                                    <p className="W_zhuan">待收货（未结算）</p>
                                </div>
                            </div>
                            <div className="d-f">
                                <p className="W_xiao">微信昵称：</p>
                                <p>TCZY店铺</p>
                            </div>
                            <div className="d-f">
                                <p className="W_xiao">收件人：</p>
                                <p>王方华</p>
                            </div>
                            <div className="d-f">
                                <p className="W_xiao">联系号码：</p>
                                <p>13094598205</p>
                            </div>
                            <div className="d-f">
                                <p className="W_xiao">收件地址：</p>
                                <p>北京市 北京区 东城区 21栋</p>
                            </div>
                            {/* <div>
                                <Button className="w_anniu" type="primary" onClick={showModal}>
                                    确定发货
                                </Button>
                            </div> */}
                        </div>

                    </div>

                </div>
                {/* 包裹 */}
                <div className="W_biao">
                    <div className="W_ge">
                        <Table pagination={false} columns={columns1} dataSource={data1} />
                        <div className="W_f_h_shifu"><p><span className="w_sapn1">累计实付：</span><span className="w_span2">￥55</span></p></div>
                    </div>
                </div>
                {/* 商品的详细信息 */}
                <div className="W_biao">
                    <div className="W_ge">
                        <Table pagination={false} columns={columns} dataSource={data} />
                        <div className="W_f_h_shifu"><p><span className="w_sapn1">累计实付：</span><span className="w_span2">￥55</span></p></div>
                    </div>
                </div>
                {/* 返回 */}
                <div className="w_fanhui">
                    <Button onClick={fanhui} className="bul" type="primary">
                        返回
                    </Button>
                </div>

                {/* 弹框弹框修改物流 */}
                <Modal
                    
                    title="订单发货"
                    visible={isModalVisible}
                   onOk={handleOk} 
                   onCancel={handleCancel}
                   okText="确认"
                   cancelText="取消"
                   width={500}
                   >
                   <div className="d-f W_tank">
                       <span className="w_fshang">  收件人  ： </span>
                       <div>
                          <div><span>联系人：</span><span>张某/15988559955</span></div>
                          <div><span>地址：</span><span>浙江省杭州市上城区某某地方</span></div>
                       </div>
                   </div>
                   <div className="d-f W_tank">
                       <span className="w_fshang">快递公司：</span>
                       <Select
                        showSearch
                        style={{ width: 300 }}
                        placeholder="快递公司"
                        optionFilterProp="children"
                        filterOption={(input, option) =>
                        option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        }
                        filterSort={(optionA, optionB) =>
                        optionA.children.toLowerCase().localeCompare(optionB.children.toLowerCase())
                        }
                    >
                        <Option value="中通快递">中通快递</Option>
                        <Option value="韵达快递">韵达快递</Option>
                        <Option value="圆通快递">圆通快递</Option>
                        <Option value="京东快递">京东快递</Option>
                        <Option value="邮政快递">邮政快递</Option>
                    </Select>                        
                   </div>
                   <div className="d-f W_tank">
                       <span className="w_fshang">快递单号：</span><Input style={{width:'300px',height:'33px'}} placeholder="快递单号" />
                   </div>
                   <div className="d-f W_tank">
                       <span className="w_fshang">发货类型：</span>
                       <Radio.Group onChange={danonChange} value={value}>
                            <Radio value={1}>按订单发货</Radio>
                            <Radio value={2}>商品分包裹发货</Radio>
                     </Radio.Group>                                          
                   </div>
                   <div className="d-f w_f_huap">
                       <span className="w_fshang_h">发货商品：</span>
                       <Tabs defaultActiveKey="1" onChange={callback}>
                            <TabPane tab="未发货" key="1">
                            <Checkbox.Group style={{ width: '100%' }} onChange={weionChange}>
                                <Row className="w_duofhjdasfgjhfgds">
                               <div>
                               <Col span={8}>
                                    <Checkbox value="A">88888888888888888888888888888888</Checkbox>
                                </Col>
                               </div>
                                <Col span={8}>
                                    <Checkbox value="B">B888888888888888888888888</Checkbox>
                                </Col>
                                <Col span={8}>
                                    <Checkbox value="C">C8888888888888888888888888</Checkbox>
                                </Col>
                                <Col span={8}>
                                    <Checkbox value="D">D8888888888888888888888888888</Checkbox>
                                </Col>
                                <Col span={8}>
                                    <Checkbox value="E">E</Checkbox>
                                </Col>
                                </Row>
                            </Checkbox.Group>
                              </TabPane>
                               <TabPane tab="已发货" key="2">
                               <Checkbox.Group style={{ width: '100%' }} onChange={weionChange}>
                                    <Row className="w_duofhjdasfgjhfgds">
                                    <Col span={8}>
                                        <Checkbox value="A">A</Checkbox>
                                    </Col>
                                    <Col span={8}>
                                        <Checkbox value="B">B</Checkbox>
                                    </Col>
                                    <Col span={8}>
                                        <Checkbox value="C">C</Checkbox>
                                    </Col>
                                    <Col span={8}>
                                        <Checkbox value="D">D</Checkbox>
                                    </Col>
                                    <Col span={8}>
                                        <Checkbox value="E">E</Checkbox>
                                    </Col>
                                    </Row>
                                </Checkbox.Group>
                              </TabPane>
                       </Tabs>                           
                   </div>
                </Modal>
           
                 {/* 弹框弹框修改物流 */}
                 <Modal
                    
                    title="物流信息"
                    visible={isModalVisible2}
                   onOk={handleOk2} 
                   onCancel={handleCancel2}
                   okText="确认"
                   cancelText="取消"
                   width={500}
                   >
                       <div className="W_f_h_wuliuchakan">
                           <span>2019.09.17</span><p>寄往浙江省杭州市上城区某某地区</p>
                       </div>
                   </Modal>
           
            </div>

        </div>
    );
}
export default Shipment;